<template>
	<div class="cr-contianer">
		<div class="title">{{ getTitle() }}</div>
		<div style="height: 100%;position: relative;">
			<div style="padding-left: 0">
				<crm-relative-table 
					v-for="(item, index) in leftSides" 
					v-show="item.type == leftType" 
					:key="index"
					:ref="'crm'+item.type" 
					:show="show && item.type == leftType" 
					:radio="radio" 
					:crm-type="item.type"
					:actiontype="actiontype"
					:id="id"
					:selected-data="currentSelectedData" 
					@changeCheckout="checkCrmTypeInfos" />
			</div>
		</div>
		<div class="handle-bar">
			<el-button 
				@click.native="closeView" 
				size="mini">取消</el-button>
			<el-button 
				type="primary" 
				@click.native="confirmClick" 
				size="mini">确定</el-button>
		</div>
	</div>
</template>

<script type="text/javascript">
	import CrmRelativeTable from './CrmRelativeTable'
	import { objDeepCopy } from '@/utils'

	export default {
		name: 'CrmRelatieve', // 相关
		components: {
			CrmRelativeTable
		},
		props: {
			/** 多选框 只能选一个 */
			radio: {
				type: Boolean,
				default: true
			},
			/** 没有值就是全部类型 有值就是当个类型 */
			crmType: {
				type: String,
				default: ''
			},
			actiontype: {
				type: [String,Number],
				default: ''
			},
			/** 需要展示哪些类型 默认关键字数组 */
			showTypes: {
				type: Array,
				default: () => {
					return [
						'setmeal'
					]
				}
			},
			/** 已选信息 */
			selectedData: {
				type: Object,
				default: () => {
					return {}
				}
			},
			/** true 的时候 发请求 */
			show: {
				type: Boolean,
				default: true
			},
			// id
			id: {
				type: [String,Number],
				default: ''
			},
		},
		data() {
			return {
				leftSides: [],
				leftType: 'setmeal',
				/** 各类型选择的值 */
				currentSelectedData: {}
			}
		},
		computed: {},
		watch: {
			selectedData: function(data) {
				this.currentSelectedData = objDeepCopy(data)
			},
			// 刷新标记
			show(val) {
				if (val) {
					this.currentSelectedData = objDeepCopy(this.selectedData)
				}
			}
		},
		mounted() {
			var leftItems = {
				customer: {
					name: '客户',
					type: 'customer'
				}
			}
			if (this.crmType) {
				this.leftType = this.crmType
				this.leftSides.push(leftItems[this.crmType])
			} else {
				for (let index = 0; index < this.showTypes.length; index++) {
					const element = this.showTypes[index]
					this.leftSides.push(leftItems[element])
				}
			}
			this.currentSelectedData = objDeepCopy(this.selectedData)
		},
		methods: {
			// 根据类型获取标题展示名称
			getTitle() {
				if (this.crmType == 'customer') {
					return '关联客户信息'
				}else {
					return '关联信息'
				}
			},
			
			// 确定选择
			confirmClick() {
				if (this.crmType) {
					// 以单类型传值
					this.$emit('changeCheckout', {
						data: this.currentSelectedData[this.crmType]
						? this.currentSelectedData[this.crmType]
						: []
					})
				} else {
					this.$emit('changeCheckout', { data: this.currentSelectedData })
				}
				this.$emit('close')
			},
			
			// 关闭操作
			closeView() {
				this.$emit('close')
			},
			
			// 回传选中数据
			checkCrmTypeInfos(data) {
				let arr = data.data
				this.currentSelectedData[data.type] = arr
			},
			
			clearAll() {
				if (this.crmType) {
					this.$refs['crm' + this.crmType][0].clearAll()
				}
			},
			
		}
	}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
	.cr-contianer {
		height: 550px;
		position: relative;
		padding: 50px 0 50px 0;
	}

	.title {
		padding: 0 20px;
		font-size: 16px;
		line-height: 50px;
		height: 50px;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 3;
		border-bottom: 1px solid #eee;
	}

	.handle-bar {
		height: 50px;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 2;

		button {
			float: right;
			margin-top: 10px;
			margin-right: 10px;
		}
	}

	.cr-body-side {
		flex-shrink: 0;
		z-index: 3;
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: 150px;
		font-size: 12px;
		background-color: white;
		height: 100%;
		border-right: 1px solid #999;

		.side-item {
			height: 35px;
			line-height: 35px;
			padding: 0 20px;
			cursor: pointer;
		}
	}

	.side-item-default {
		color: #333;
	}

	.side-item-select {
		color: #409eff;
		background-color: #ecf5ff;
	}
</style>
